<template>
	<view>
		<!-- 主体 -->
		<view class="main">
			<view class="order-content">
				<view class="grid-box border-shadow u-m-b-20" v-for="(item, index) in listData" :key="index">
					<view class="top u-border-bottom u-p-b-20">
						<view class="u-flex">
							<view class="left u-flex-1">
								<view class="u-tips-color">{{ item.name }}</view>
							</view>
							<u-checkbox v-model="item.checked" :name="item.id"
								@change="radioCheckboxChange"></u-checkbox>
						</view>
					</view>
				</view>
				<!-- <u-loadmore status="loading" /> -->
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group u-m-t-30">
					<view class="u-flex">
						<view><text class="u-tips-color">已选:{{ listData.filter((item) => item.checked).length }}</text>
						</view>
						<view class="u-flex u-flex-1">
							<view class="u-flex-1">
								<view class="u-p-r-30 u-text-right">
									<text class="u-color-main" @click="cancel">返回</text>
								</view>
							</view>
							<u-button type="primary" size="medium" @click="confirm">确定</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				PageIndex: 1,
				PageSize: 9999,
				key: '',
				listData: [],
				total: 0, //合计
				ids: [], //选中的id数组
				checkAll: false,
				chooseId: null, //单选中的id
			}
		},
		onLoad(opt) {
			console.log('onLoad',this.chooseOrder)
			this.getlistData(true)
		},
		onReachBottom(e) {
			// 此tab为空数据
			this.PageIndex += 1
			if (this.loadStatus == 'loadmore') {
				this.getlistData()
			}
		},
		watch: {
			checkAll(val) {
				if (val) {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = true
					})
				} else {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = false
					})
				}
			}
		},
		computed: {
			...mapState('shop', {
				chooseOrder: state => state.chooseOrder
			})
		},
		methods: {
			radioCheckboxChange(value) {
				console.log('radioCheckboxChange', value)
				let itemId = value.name
				// 取消所有其他项的选中状态
				this.listData.forEach((item, index) => {
					if (item.id !== itemId) {
						// 使用 $set 确保响应式更新
						this.$set(this.listData, index, {
							...item,
							checked: false
						});
					} else {
						// 设置当前项为选中
						this.$set(this.listData, index, {
							...item,
							checked: true
						});
					}
				});
				
				this.chooseId = itemId
			},
			getlistData(isSearch) {
				// 关键词搜索
				if (isSearch) {
					this.PageIndex = 1
					this.listData = []
					this.loadStatus = 'loadmore'
				}
				// 获取待付订单详细列表
				return this.$u.post('/Franchise/Staff/List', {
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"key": this.key
				}).then((res) => {
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							item.checked = false
							this.listData.push(item)
						})

						if (res.rows.length < this.PageSize) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore'
						}
					} else {
						this.loadStatus = 'nomore'
					}
				})
			},

			goDetails(id) {
				uni.navigateTo({
					url: '/pages/shop/outbound/views/views?id=' + id
				})
			},
			cancel() {
				uni.navigateBack()
			},
			confirm(){
				// this.$emit('confirm',this.chooseId)
				this.$store.commit('shop/setChooseOrder', this.listData.find((item)=>item.id == this.chooseId))
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped scoped>
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;

		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}

	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 120rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}

		.fixed-placeholder {
			height: 120rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}

		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}

		.btn-group {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			padding-top: 0;
		}
	}

	.inAll {
		text-decoration: underline;
		color: $u-color-blue;
	}

	.pack {
		display: flex;
		padding: 0 0 0 10rpx;

		// align-items: center;
		.item {
			// width:40%;
			// border: 1px solid $u-border-color;
			display: flex;
			padding: 0 20rpx;
			// border-radius: 10rpx;
			min-height: 120rpx;
			margin-top: 0 !important;

			.name {
				font-size: 36rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: $u-color-gray;
				font-size: 24rpx;
			}
		}

		.left-con {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20rpx;
			padding-bottom: 52rpx;

			.text {
				font-size: 24rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #fff;
				border-radius: 40rpx;

				&.in {
					background-color: $u-color-primary;
				}

				&.out {
					background-color: $u-color-orange;
				}
			}

			.border {
				border-left: 1px solid $u-border-color;
				flex: 1;
				width: 1px;
				margin: 10rpx 0;
			}
		}
	}
</style>